<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <link rel="icon" href="favicon.ico">
    <title>在线剪切板</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        .header-box {
            grid-area: header;
        }
        .header-box h3 {
            margin-left: 15px;
        }
        .main-box {
            grid-area: main;
            height: 100vh;
        }
        .main-box textarea {
            width: calc(100% - 15px);
            height: 100%;
            font-size: 16px;
            font-weight: bold;
            background:transparent;
            border-style:none;
            padding: 10px;
            margin-left: -1px;
            margin-top: -1px;
        }

        .right-box {
            grid-area: right;
        }
        .right-box div  {
            padding: 15px;
        }
        .right-box button {
            width: 100%;
            padding: 15px;
        }
        .grid-container {
            max-height: 100%;
            overflow: hidden;
            display: grid;
            grid:
                'header header header header header header'
                'main main main main main right';
            grid-gap: 10px;
            background-image: url();
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .header-box{
            background-color: rgba(255, 255, 255, 0.6);
            color: #303133;
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .textarea-box {
            margin: 15px;
            border: 1px solid #fff;
            background-color: rgba(255,255,255,.8);
            height: calc(100% - 100px);
            width: calc(100% - 30px);
            overflow: hidden;
            border-radius: 10px;
        }
        .save-btn {
            background-color: #d0dff5;
            color: #4b5a6c;
            border-radius: 6px;
            border-color: #d0dff5;
            font-size: 1rem;
            font-weight: bold;
        }
        .copy-btn {
            background-color: #f3f9d5;
            color: #4b5a6c;
            border-radius: 6px;
            border-color: #f3f9d5;
            font-size: 1rem;
            font-weight: bold;
        }
        /* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */
        @media screen and (max-width: 992px) {
            .grid-container {
                grid:
                'header header header header header header'
                'main main main main main main'
                'footer footer footer footer footer footer';
                grid-template-rows: 63px auto 84px;
                height: 100%;
            }
            .right-box {
                grid-area: footer;
            }
            .main-box {
                height: 100%;
            }
            .textarea-box {
                height: 100%;
            }
            .right-box div {
                float: left;
                width: 50%;
                box-sizing: border-box;
            }
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="header-box">
            <h3>在 线 剪 切 板</h3>
        </div>
        <div class="main-box">
            <div class="textarea-box"><textarea name="" id="resText"></textarea></div>
            
        </div>
        <div class="right-box">
            <div><button onclick="saveToClub()" class="save-btn">保存文本</button></div>
            <div><button onclick="copyToClip()" class="copy-btn">复制文本</button></div>
        </div>
    </div>
    <script>
        var textarea = document.querySelector("#resText");
        var copyToClip = function(){
            textarea.select();
            document.execCommand("copy");
            alert("复制成功");
        }
        var saveToClub = function(){
            console.log(textarea.value)
            xhr.open("POST", " https://cfffed3a8d244c63899ac78c12abcf41.apig.cn-south-1.huaweicloudapis.com/serverAction/savedata?content="+encodeURIComponent(textarea.value), true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send();
            alert("保存成功");
        }

        var xhr = new XMLHttpRequest();
 
        xhr.onload = function () {
            if(xhr.responseText){
                console.log(xhr.responseText);
                textarea.value = xhr.responseText;
            }
        }
        
        xhr.onerror = function () {
            console.log("请求出错");
        }
        
        // 发送异步 GET 请求
        xhr.open("GET", "https://cfffed3a8d244c63899ac78c12abcf41.apig.cn-south-1.huaweicloudapis.com/serverAction/getdata", true);
        xhr.send();
    </script>
</body>
</html>